<template>
    <div id="box">
        <el-container>
            <el-header>
                <span>新增教师</span>
                <a class="right" @click="back" href="javascript:;">< 返回</a>
            </el-header>
            <div id="content">
                <p class="jiben">基本信息</p>
                <ul class="left">
                    <li>
                        <p><span style="color: red">*</span>名字</p>
                        <el-input v-model="name" placeholder="用户名"></el-input>
                    </li>
                    <li>
                        <p><span style="color: red">*</span>联系电话</p>
                        <el-input v-model="phone" placeholder="联系电话" @blur="phoneyz" :plain="true"></el-input>
                    </li>
                    <li>
                        <p><span style="color: red">*</span>所属部门</p>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </li>
                    <li>
                        <p><span style="color: red">*</span>出生日期</p>
                        <el-date-picker
                                v-model="birthday"
                                align="right"
                                type="date"
                                placeholder="年/月/日"
                                :picker-options="pickerOptions"
                        >
                        </el-date-picker>
                    </li>
                    <li>
                        <p><span style="color: red">*</span>登录密码</p>
                        <el-input
                                v-model="password"
                                placeholder="输入系统登录密码"
                        ></el-input>
                    </li>
                    <li>
                        <p><span style="color: red">*</span>头像照片</p>

                        <div slot="tip" class="el-upload__tip">
                            单上传头像图片大小不能超过 2MB!,仅支持JPG、JPEG、PNG格式
                        </div>
                        <!-- </el-upload> -->
                        <div id="upload">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/image"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload"
                                    name="uploadFile"
                            >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </li>
                </ul>
                <ul class="right">
                    <li>
                        <p><span style="color: red">*</span>电子邮件</p>
                        <el-input v-model="email" placeholder="电子邮件" @blur="emailyz" :plain="true"></el-input>
                    </li>
                    <li>
                        <p><span style="color: red">*</span>性别</p>
                        <el-radio v-model="sex" label="1">男</el-radio>
                        <el-radio v-model="sex" label="0">女</el-radio>
                    </li>
                    <li>
                        <p><span style="color: red">*</span>教育程度</p>
                        <el-select v-model="value2" placeholder="请选择">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.value2"
                                    :label="item.labe2"
                                    :value="item.value2">
                            </el-option>
                        </el-select>
                    </li>
                    <li>
                        <p><span style="color: red">*</span>入职时间</p>
                        <el-date-picker
                                v-model="entryTime"
                                type="datetime"
                                placeholder="年/月/日"
                                :picker-options="pickerOptions1"
                        >
                        </el-date-picker>
                    </li>
                    <li>
                        <p><span style="color: red">*</span>确认密码</p>
                        <el-input v-model="confirm" placeholder="确认密码" @blur="passyz" :plain="true"></el-input>
                    </li>
                </ul>
            </div>
        </el-container>
        <div id="footBox">
            <div id="footer">
                <el-button type="info" @click="cancle" :plain="true">取消</el-button>
                <el-button type="success" @click="baocun" :plain="true">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AddTeacher",
        data: function () {
            return {
                imageUrl: "",
                name: "", //教师姓名
                phone: "", //联系方式
                birthday: "", //出生日期
                password: "", //登录密码
                email: "", //邮件
                sex: "", //性别
                education: "", //教育程度
                entryTime: "", //入职日期
                confirm: "", //确认密码
                fileList: [], //上传文件列表
                pickerOptions: {
                    shortcuts: [
                        {
                            text: "今天",
                            onClick(picker) {
                                picker.$emit("pick", new Date());
                            },
                        },
                        {
                            text: "昨天",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit("pick", date);
                            },
                        },
                        {
                            text: "一周前",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", date);
                            },

                        },
                    ],
                    disabledDate(time) {
                        let timi = 365 * 18 * 24 * 60 * 60 * 1000;//大概十八年的时间戳
                        let eighteen = Date.now() - timi;
                        return time.getTime() > Date.now() || time.getTime() > eighteen;
                    }
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
                options: [],//部门下拉菜单
                value: "",//部门名称
                value2: "",//教育程度
                options2: [
                    {
                        value2: '幼儿园',
                        labe2: '幼儿园'
                    },
                    {
                        value2: '小学',
                        labe2: '小学'
                    }, {
                        value2: '初中',
                        labe2: '初中'
                    }, {
                        value2: '中专',
                        labe2: '中专'
                    }, {
                        value2: '高中',
                        labe2: '高中'
                    }, {
                        value2: '专科',
                        labe2: '专科'
                    }, {
                        value2: '本科',
                        labe2: '本科'
                    }, {
                        value2: '硕士研究生',
                        labe2: '硕士研究生'
                    }, {
                        value2: '博士研究生',
                        labe2: '博士研究生'
                    }, {
                        value2: '博士后',
                        labe2: '博士后'
                    }
                ],//教育程度
            };
        },
        methods: {
            handlePreview(file) {
            },

            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
            },

            beforeAvatarUpload(file) {
                const isJPG = file.type === "image/jpeg";
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error("上传头像图片只能是 JPG 格式!");
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                }
                return isJPG && isLt2M;
            },

            //手机号验证
            phoneyz() {
                var reg = /^1[3-9]\d{9}$/;
                if (!reg.test(this.phone)) {
                    this.$message.error('手机格式不正确，请重新输入！');
                }
            },

            //邮箱验证
            emailyz() {
                //邮箱正则
                var emreg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!emreg.test(this.email)) {
                    this.$message.error('邮箱格式不正确，请重新输入！');
                }
            },

            //确认密码
            passyz() {
                //判断两次输入密码是否正确
                if (this.password != this.confirm) {
                    this.$message.error('两次输入密码不一致，请重新输入！');
                }
            },

            //返回按钮
            back() {
                this.$router.go(-1);
            },

            //保存
            baocun() {
                this.$confirm('请认真核对姓名、性别、出生日期、教育程度和入职时间，填写后不可修改！！', '提示', {
                    confirmButtonText: '保存',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (this.name == '' || this.sex == '' || this.phone == '' || this.email == '' || this.value == '' || this.password == '' || this.value2 == '' || this.birthday == ''
                        || this.entryTime == '' || this.confirm == '' || this.imageUrl == '') {
                        this.$message({
                            showClose: true,
                            message: '请填写完整信息！',
                            type: 'warning'
                        });
                    } else {
                        this.$axios({
                            url: '/teacher/insert',
                            method: 'post',
                            data: {
                                id: null,
                                name: this.name,
                                phone: this.phone,
                                departmentId: this.value,
                                birthday: this.birthday,
                                password: this.password,
                                email: this.email,
                                sex: parseInt(this.sex),
                                education: this.value2,
                                entryTime: this.entryTime,
                                confirm: this.confirm,
                                image: this.imageUrl
                            }
                        }).then((res) => {
                            console.log(res);
                            if (res.data.code == 0) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.$router.push('/teacherList');
                            } else if (res.data.code == 50004) {
                                this.$message.error(`${res.data.msg}`);
                            } else if (res.data.code == 50005) {
                                this.$message.error(`${res.data.msg}`);
                            }
                        })
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },

            //取消
            cancle() {
                this.$confirm('检测到有未保存的内容，确认是否离开？', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '保存',
                    cancelButtonText: '离开'
                })
                    .then(() => {
                        this.baocun();
                    })
                    .catch(action => {
                        this.$message({
                            type: 'info',
                            message: action === 'cancel'
                                ? '放弃保存并清空页面'
                                : '停留在当前页面'
                        });
                        this.name = '';
                        this.phone = '';
                        this.value = '';
                        this.birthday = '';
                        this.password = '';
                        this.email = '';
                        this.sex = '';
                        this.education = '';
                        this.entryTime = '';
                        this.confirm = '';
                        this.imageUrl = '';
                    });
            },
        },
        //加载的时候
        mounted() {
            //一开始渲染所有部门
            this.$axios({
                url: '/teacher/findAllDepartment',
                method: 'post'
            }).then((res) => {
                console.log(res);
                var data = res.data.data;
                for (var i = 0; i < data.length; i++) {
                    this.options.push({value: data[i].id, label: data[i].departmentName})
                }
            })
        },
    };
</script>

<style scoped lang="less">
    @contentbgcolor: white;
    @margin: 10px;
    ul {
        padding: 0;
    }

    a {
        text-decoration: none;
        color: #333333;
    }

    li {
        list-style: none;
        margin-top: 15px;

        p {
            margin: 0;
        }
    }

    #box {
        background: #f2f2f6;
    }

    .el-container {
        margin: 0;
        padding: 0;
    }

    .el-header {
        margin-top: 20px;
        background-color: @contentbgcolor;
        color: #333;
        text-align: left;
        line-height: 60px;
        font-size: 20px;

        .right {
            float: right;
            margin-right: 10px;
        }
    }

    #content {
        background: @contentbgcolor;
        margin-top: 10px;

        .jiben {
            margin-left: 10px;
        }

        .left {
            float: left;
            margin-left: @margin;

            #upload {
                width: 178px;
                height: 178px;
                border: 1px dashed #6b6767;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .avatar-uploader .el-upload {
                border: 1px dashed #cfa1a1;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .avatar-uploader .el-upload:hover {
                border-color: #409eff;
            }

            .avatar-uploader-icon {
                font-size: 28px;
                color: #587397;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }

            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
        }

        .right {
            float: right;
            margin-right: @margin;
        }

        .el-input,
        .el-select {
            width: 750px;
            height: 50px;
        }
    }

    #footBox {
        width: 100%;
        height: 350px;
        background: white;
    }

    #footer {
        margin-left: 43%;
        height: 200px;

        .el-button {
            float: left;
            margin-top: 100px;
        }
    }
</style>